<!DOCTYPE html>
<html>
    <head>
        <title>Preview Symbol</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
        <style>
            html, body {
                padding: 0px;
                margin: 0px;
            }
        </style>

        <script src='custom/configs/htconfig.js'></script>
        <script src='libs/ht.js'></script>

        <script>
            /**
             * 信息内容向左移动入显示屏
             */
            function infoBoardIn(data) {
                data.a('clipDirection', 'right')// 进入
                ht.Default.startAnim({
                    duration: 2000,
                    easing: function (t) {
                        return t
                    },
                    action: function(v) {
                        data.a('clipPercentage', v)
                    },
                    finishFunc: function() {
                        infoBoardHold(data)
                    }
                })
            }

            /**
             * 信息内容向左移出显示屏
             */
            function infoBoardOut(data) {
                data.a('clipDirection', 'left')// 移出
                ht.Default.startAnim({
                    duration: 2000,
                    easing: function (t) {
                        return 1 - t
                    },
                    action: function(v) {
                        data.a('clipPercentage', v)
                    },
                    finishFunc: function() {
                        infoBoardIn(data)
                    }
                })
            }

            /**
             * 信息内容闪烁并保持3秒
             */
            function infoBoardHold(data) {
                let count = 0
                let timer = setInterval(function() {
                    data.a('textVisible', !data.a('textVisible'))
                    count++
                    if (count >= 6) {
                        clearInterval(timer)
                        data.a('textVisible', true)
                        infoBoardOut(data)
                    }
                }, 500)
            }

            function init() {
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                graphView.addToDOM();
                graphView.setEditable(true);

                ht.Default.xhrLoad('previews/symbol.json', function(text) {
                    var json = ht.Default.parse(text);
                    if (json.title) document.title = json.title;
                    dataModel.setBackground(json.background);
                    node = new ht.Node();
                    node.setImage(json);
                    node.setPosition(graphView.getWidth()/2, graphView.getHeight()/2);
                    dataModel.add(node);

                    infoBoardIn(node)
                });
            }

        </script>
    </head>
    <body onload='setTimeout(init, 300)'>
    </body>
</html>
